<template>
    <el-menu
        default-active="0"
        :router="true"
        active-text-color="#fFfFfFCC"
        background-color="#2a2e35"
        class="el-menu-vertical-demo"
        text-color="#fff"
        v-for="item in data"
    >
      <el-menu-item v-if="item.permissionType=='M' && item.permissionList.length==0" :index="item.path" >
        <template style="" #title>
          <div style="line-height: 20px" v-html="item.permissionIcon"></div>
          <span style="margin-left: 5px">{{item.permissionName}}</span>
        </template>
      </el-menu-item>

      <el-sub-menu v-if="item.permissionType=='M' && item.permissionList.length!=0" :index="item.path" >
        <template style="" #title>
          <div style="line-height: 20px" v-html="item.permissionIcon"></div>
          <span style="margin-left: 5px">{{item.permissionName}}</span>
        </template>

        <TreeItem :data="item.permissionList"/>

      </el-sub-menu>

      <el-sub-menu v-if="item.permissionType=='C' && item.permissionList.length!=0" :index="item.path">
        <template #title>{{item.permissionName}}</template>
        <TreeItem :data="item.permissionList"/>
      </el-sub-menu>

      <el-menu-item v-if="item.permissionType=='C' && item.permissionList.length==0" :index="item.path">
        <span>{{item.permissionName}}</span>
      </el-menu-item>
    </el-menu>

</template>

<script>
export default {
  name: "TreeItem",
  props:{
    data:Array
  }
}
</script>

<style scoped>
</style>